<%--
  Created by IntelliJ IDEA.
  User: XTT
  Date: 2022/9/29
  Time: 9:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理-登陆</title>
    <style>
        *{padding: 0;
        margin: 0}
        #app{
            min-height: 100%;
            width: 100%;
            overflow: hidden;
            background-size: 100% 100%;
            text-align: center;
            width: 100%;
            height: 721px;
            background-image: url("${pageContext.request.contextPath}/images/bj.jpeg");
        }
        .login-container{
            margin: 0 auto;
            padding-top: 170px;
            width: 350px;
        }
        h3{
            font-weight: 500;
            font-size: 30px;
            color: white;
            padding-bottom: 30px;
        }
        .avatar-box{
            margin: 0 auto;
            height: 100px;
            width: 100px;
            border-radius: 60px;
            background-image: url("${pageContext.request.contextPath}/images/ikun1.jpeg");
            background-size: 100% 100%;
            border: 3px solid #00b7ee;
        }
        .input{
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>

</head>
<body>
<div id="app">
    <transition name="v-loading">
    <div element-loading-text="登录中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.6)" class="login-container">

        <el-form ref="user_info" :model="user_info" :rules="user_info" class="login-form" auto-complete="on" label-position="left">
            <!-- 头像区域 -->
            <div v-if="TxStatus" class="avatar-box">

            </div>

            <div class="title-container">
                <h3 class="title">ikun酒店后台管理系统</h3>
            </div>

            <el-form-item prop="username">
                <el-input ref="username" class="input" v-model="user_info.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on" />
            </el-form-item>

            <el-form-item prop="password">
                <el-input :key="passwordType" class="input" ref="password" v-model="user_info.password" type="password" placeholder="Password" name="password" tabindex="2" auto-complete="on"/>
            </el-form-item>
<%--            <el-form-item prop="code">--%>
<%--                <div class="form-group">--%>
<%--                    <el-input--%>
<%--                            v-model="user_info.verifyCode"--%>
<%--                            auto-complete="off"--%>
<%--                            placeholder="验证码"--%>
<%--                            style="width: 63%;margin-right: 125px"--%>
<%--                            @keyup.enter.native="handleLogin"--%>
<%--                    >--%>
<%--                        <svg-icon--%>
<%--                                slot="prefix"--%>
<%--                                icon-class="validCode"--%>
<%--                                class="el-input__icon input-icon"--%>
<%--                        />--%>
<%--                    </el-input>--%>
<%--                        <img style="position: absolute;right: 0;top: 3px;"  src="${pageContext.request.contextPath }/user/getVerifyCode" width="110" height="34" v-model="user_info.verifyCodeImage" id="verifyCodeImage" @click="changeImage">--%>
<%--                </div>--%>
<%--            </el-form-item>--%>
            <div>
                <el-button type="primary" style="width:100%;margin-bottom:20px;" @click="btnLogin" v-loading.fullscreen.lock="fullscreenLoading">登录</el-button>
            </div>

        </el-form>
    </div>
    </transition>
</div>
<script>

</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el:'#app',
        name:'',
        data(){

            return{
                // 头像状态
                TxStatus: true,
                verifyCode:"",
                user_info: {
                    username:"",
                    password:"",
                    // verifyCode:"",
                    // verifyCodeImage:""
                },
                fullscreenLoading:false
            }
        },
        mounted() {
        },methods: {
            <%--changeImage(){--%>
            <%--    this.user_info.verifyCodeImage.attr('src','${pageContext.request.contextPath }/user/getVerifyCode')--%>
            <%--},--%>
            btnLogin() {
                const loading = this.$loading({
                    lock: true,
                    text: '登录中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                }, 2000)
                axios.post('${pageContext.request.contextPath}/user/login',this.user_info).then(
                    (response)=>
                    {


                        if(response.data.token==null)
                        {
                            location.href = 'login.jsp?err='+response.data.message;
                            return ;
                        }
                        var localstroage = window.localStorage;
                        // set item
                        localstroage.setItem('token', response.data.token);
                        console.log(response.data.token);

                        location.href = '${pageContext.request.contextPath}/index';
                    }
                ).catch(

                    (response)=>
                    {
                        console.log(response)
                    }
                )
            }
        }
    })
</script>

</body>

</html>
